<template>
  <div class="login-container">
    <van-form @submit="onSubmit" class="login-form">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field v-model="captchaValue" name="captchaValue" label="验证码" :rules="captchaRules" autocomplete="false">
        <template #extra>
          <div class="captcha" @click="getCaptcha" v-html="captchaSvg"></div>
        </template>
      </van-field>
      <van-field name="remember" label="三天免登录">
        <template #input>
          <van-switch v-model="remember" size="20" />
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
    <div class="link">
      <router-link to="/registry">点我注册</router-link>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { getCaptcha, checkCaptcha } from '@/api/common'
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
      redirect: '/',
      captchaValue: '',
      remember: false,
      captchaId: '',
      captchaSvg: '',
      captchaRules: [
        { required: true, message: '请填写验证码' },
        { validator: this.captchaValidator, message: '验证码错误' }
      ]
    }
  },
  mounted() {
    const { redirect } = this.$route.query
    if (redirect) {
      this.redirect = redirect
    }
    this.getCaptcha()
  },
  methods: {
    ...mapActions({
      login: 'user/login'
    }),
    onSubmit(data) {
      const form = {
        ...data,
        captchaId: this.captchaId
      }
      this.login(form)
        .then(token => {
          if (token) {
            // FIX: 此次获取不到token导致连接失败
            this.$router.push(this.redirect)
            this.$socket.query.token = token
            this.$socket.connect()
          }
        })
        .catch(e => {
          this.msg = JSON.stringify(e)
        })
    },
    async getCaptcha() {
      const res = await getCaptcha()
      const { code, data } = res
      if (code === 0) {
        this.captchaId = data.captchaId
        this.captchaSvg = data.data
      }
    },
    async captchaValidator(val) {
      if (val.length !== 4) {
        return false
      }
      const { code } = await checkCaptcha({
        captchaId: this.captchaId,
        captchaValue: val
      })
      return code === 0
    }
  }
}
</script>

<style lang="scss">
.login-container {
  height: 100vh;
  background: url('../assets/img/login_bg.png') center / cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  // align-items: center;
  .captcha {
    height: 40px;
    width: 120px;
  }
  .link{
    text-align: center;
    a{color: $gray-7;}
  }
}
</style>
